import View from './components/view'
import Link from './components/link'

export let _Vue

/**
 * 当用户执行 Vue.use(VueRouter) 的时候，实际上就是在执行 install 函数
 * @param {*} Vue 
 * @returns 
 */
export function install (Vue) {
  // 为了确保 install 逻辑只执行一次，用了 install.installed 变量做已安装的标志位
  if (install.installed && _Vue === Vue) return
  install.installed = true

  // 用一个全局的 _Vue 来接收参数 Vue，因为作为 Vue 的插件对 Vue 对象是有依赖的，但又不能去单独去 import Vue，因为那样会增加包体积，所以就通过这种方式拿到 Vue 对象。
  _Vue = Vue

  const isDef = v => v !== undefined

  const registerInstance = (vm, callVal) => {
    let i = vm.$options._parentVnode
    if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) {
      i(vm, callVal)
    }
  }

  Vue.mixin({
    beforeCreate () {
      if (isDef(this.$options.router)) {
        // this._routerRoot 表示它自身
        this._routerRoot = this
        // this._router 表示 VueRouter 的实例 router，它是在 new Vue 的时候传入的；
        this._router = this.$options.router
        // this._router.init() 方法初始化 router
        this._router.init(this)
        // 把 this._route 变成响应式对象
        Vue.util.defineReactive(this, '_route', this._router.history.current)
      } else {
        // this._routerRoot 始终指向的离它最近的传入了 router 对象作为配置而实例化的父实例。
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
      registerInstance(this, this)
    },
    destroyed () {
      registerInstance(this)
    }
  })

  // 给 Vue 原型上定义了 $router 和 $route 2 个属性的 get 方法
  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

  // 通过 Vue.component 方法定义了全局的 <router-link> 和 <router-view> 2 个组件
  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)

  // 定义了路由中的钩子函数的合并策略
  const strats = Vue.config.optionMergeStrategies
  // use the same hook merging strategy for route hooks
  strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created
}
